<template>
    <view class="container">
        <!-- banner区域 -->
        <image class="banner" src="https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/banner2.jpg"
            mode="aspectFill"></image>
        <!-- 标题区域 -->
        <view class="header">
            <text class="header-title">我的娃屋</text>
            <text class="header-count">共{{ dolls.length }}个</text>
        </view>
        <!-- 娃娃列表区域 -->
        <scroll-view class="doll-list" scroll-y v-if="dolls.length > 0">
            <view class="doll-item" v-for="doll in dolls" :key="doll.id" @click="handleItemClick(doll)">
                <image class="doll-avatar" :src="doll.avatar" mode="aspectFill"></image>
                <view class="doll-info">
                    <text class="doll-name">{{ doll.name }}</text>
                    <text class="doll-time">{{ doll.bindTime }}</text>
                </view>
                <view class="doll-actions">
                    <view class="action-btn" @click.stop="handleUnbind(doll)">
                        <uni-icons type="close" size="20" color="#FF69B4"></uni-icons>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 空状态展示 -->
        <view class="empty-state" v-else>
            <image class="empty-image" :src="emptyImageUrl" mode="aspectFit"></image>
            <text class="empty-text"></text>
        </view>
        <!-- 悬浮客服按钮 -->
        <view class="floating-service" @click="handleService">
            <uni-icons type="headphones" size="32" color="#FFFFFF"></uni-icons>
        </view>
    </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { onTabItemTap } from '@dcloudio/uni-app';
import { appDollApi } from '@/api/business/bjd/app-doll-api';
import { appUserApi } from '@/api/business/bjd/app-user-api';

console.log('wahome.vue 初始化');

async function loadBindList(){
    const listData = await appUserApi.list();
    if (listData.code === 0) {
        const list = listData.data;
        const newDolls = [];
        for (const item of list) {
            const doll = {
                id: item.id,
                orderNo: item.orderNo,
                name: item.dollNo,
                avatar: item.imageUrl,
                bindTime: item.createTime
            };
            newDolls.push(doll);
        }
        dolls.value = newDolls;
    }
}
// 模拟数据
const dolls = ref([]);
const emptyImageUrl = 'https://ai-public.mastergo.com/ai/img_res/c61524c2fe380e7d32e19b101dbc5ca0.jpg';
// 处理点击事件
const handleItemClick = (doll) => {
    console.log('点击娃娃:', doll.name);
    // 显示加载提示
    uni.showLoading({
        title: '加载中...',
        mask: true
    });
    // 跳转到详情页面
    uni.navigateTo({
        url: `/pages/doll/dollDetail?orderNo=${doll.orderNo}`,
        complete: () => {
            // 隐藏加载提示
            uni.hideLoading();
        }
    });
};

onMounted(async() => {
    console.log('wahome.vue onMounted 触发');
    try {
        await loadBindList();
        console.log('onMounted 数据加载完成，娃娃列表：', dolls.value);
    } catch (error) {
        console.error('onMounted 加载数据失败：', error);
        uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
        });
    }
});

// 每次点击底部导航时触发
onTabItemTap((item) => {
    console.log('wahome.vue onTabItemTap 触发', item);
    try {
        loadBindList().then(() => {
            console.log('onTabItemTap 数据加载完成，娃娃列表：', dolls.value);
        }).catch((error) => {
            console.error('onTabItemTap 加载数据失败：', error);
            uni.showToast({
                title: '加载失败，请重试',
                icon: 'none'
            });
        });
    } catch (error) {
        console.error('onTabItemTap 执行失败：', error);
    }
});


const  handleUnbind = (doll) => {
    uni.showModal({
        title: '确认解绑',
        content: `确定要解绑"${doll.name}"吗？`,
        confirmColor: '#FF69B4',
        success: async (res) => {
            if (res.confirm) {
                // 执行解绑操作
                // 例如：调用后端接口进行解绑操作
                const param = {
                    orderNo: doll.orderNo
                }
                await appDollApi.unbind(param);
                await loadBindList();
                //dolls.value = dolls.value.filter(item => item.id !== doll.id);
            }
        }
    });
};
// 处理客服点击事件
const handleService = () => {
    uni.previewImage({
        urls: ['https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/public/common/3943bf100b904abab70ca3268d69b64d_20250307201726.jpg'],
    });
};
</script>
<style>
page {
    height: 100%;
}

.floating-service {
    position: fixed;
    bottom: 120rpx;
    right: 40rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(to right bottom, #ff6b8b, #ff6b8b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(255, 105, 180, 0.3);
    z-index: 100;
}

.floating-service:active {
    transform: scale(0.95);
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: #F8F8F8;
}

.banner {
    margin-top: 160rpx;
    width: 750rpx;
    height: 250rpx;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    background: linear-gradient(to right, #ff6b8b, #ff6b8b);
}

.header-title {
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold;
}

.header-count {
    font-size: 14px;
    color: #FFFFFF;
}

.doll-list {
    flex: 1;
    padding: 0 30rpx;
    overflow: auto;
}

.doll-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.doll-item:active {
    transform: scale(0.98);
}

.doll-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    border: 4rpx solid #FFB6C1;
}

.doll-info {
    flex: 1;
    margin-left: 30rpx;
}

.doll-name {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
}

.doll-time {
    font-size: 12px;
    color: #999999;
    display: block;
}

.doll-actions {
    display: flex;
    align-items: center;
}

.action-btn {
    padding: 40rpx;
}

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx;
}

.empty-image {
    width: 400rpx;
    height: 400rpx;
    margin-bottom: 40rpx;
}

.empty-text {
    font-size: 16px;
    color: #999999;
    margin-bottom: 40rpx;
}
</style>